import { View, Text, Image, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './giftBox.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import {IPLAND_OSS_HOST} from '../../constant';
import Blank from './blank';

const purchasedData = [
  {
    title: '大礼包',
    type: 'ipland',
    url: '/pages/package-I/home/index',
  },
  {
    title: '大礼包',
    type: 'complaints',
    url: '/pages/package-A/complaints/index',
  },
  {
    title: '大礼包',
    type: 'address',
    url: '/pages/package-A/question-survery/index',
  },
  {
    title: '大礼包',
    type: 'customer',
  },
];

const expiredData = [
  {
    title: '大礼包',
    type: 'activationRecord',
    url: '/pages/package-A/activationRecord/index',
  },
  {
    title: '大礼包',
    type: 'message',
    url: '/pages/package-A/message/index',
  },
  {
    title: '大礼包',
    type: 'myPost',
    url: '/pages/package-C/myPost/index',
  },
  {
    title: '大礼包',
    type: 'address',
    url: '/pages/package-D/address/index',
  },
  {
    title: '大礼包',
    type: 'prizesRecord',
    url: '/pages/package-C/prizesRecord/index',
  },
];

type IToolsBoxProps = T.IProps & T.IToolsBoxProps;
//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
export default class Info extends Component<Partial<IToolsBoxProps>, T.IToolsBoxState> {
  constructor(props: IToolsBoxProps) {
    super(props);
  }

  // 已购买
  getPurchasedBox(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View
          className="purchased"
          onClick={() => {
            if (item.type == 'customer') {
              this.props.actions.action.commonChange('main.visible', true);
            } else {
              this.itemClick(item);
            }
          }}
        >
          <Text className="title">{item.title}</Text>
          <Text className="effect">神秘大奖等你</Text>
          <Image className="giftImg" src={`${IPLAND_OSS_HOST}backpack/prop.png`} mode="heightFix" />
          <Text className="period ">有效期至2023-9-08</Text>
          <View className="contain">
            <View className="con">
              <Image className="img" src={`${IPLAND_OSS_HOST}backpack/bean.png`} mode="heightFix" />
            </View>
            <View className="con">
              <Image className="img" src={`${IPLAND_OSS_HOST}backpack/prop.png`} mode="heightFix" />
            </View>
            <View className="con">
              <Image className="img" src={`${IPLAND_OSS_HOST}backpack/coin.png`} mode="heightFix" />
            </View>
          </View>
        </View>,
      );
    });
    return toolsView;
  }

  // 已失效
  getExpiredBox(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View className="expired">
          <View
            className="expiredItem"
            onClick={() => {
              if (item.type == 'customer') {
                this.props.actions.action.commonChange('main.visible', true);
              } else {
                this.itemClick(item);
              }
            }}
          >
            <Text className="title">{item.title}</Text>
            <Text className="effect">神秘大奖等你</Text>
            <Image className="giftImg" src={`${IPLAND_OSS_HOST}backpack/prop.png`} mode="heightFix" />
            <Text className="period ">有效期至2023-9-08</Text>
            <View className="contain">
              <View className="con">
                <Image className="img" src={`${IPLAND_OSS_HOST}backpack/bean.png`} mode="heightFix" />
              </View>
              <View className="con">
                <Image className="img" src={`${IPLAND_OSS_HOST}backpack/prop.png`} mode="heightFix" />
              </View>
              <View className="con">
                <Image className="img" src={`${IPLAND_OSS_HOST}backpack/coin.png`} mode="heightFix" />
              </View>
            </View>
          </View>
          <View className="cover">
            <Image className="img" src={`${IPLAND_OSS_HOST}backpack/expired.png`} mode="heightFix" />
          </View>
        </View>,
      );
    });
    return toolsView;
  }

  async itemClick(item) {
    Taro.navigateTo({
      url: item.url,
    });
  }

  render() {
    let {
      main: { giftStatusTab },
      actions: { action },
    } = this.props;
    return (
      <ScrollView
        className="scroll-view-backpack"
        scrollY
        scrollWithAnimation
      >
        {giftStatusTab == 0 && <View className="PageBackpackPropBox">
          {purchasedData.length != 0 ?
            <View className="toolsBox">{this.getPurchasedBox(purchasedData)}</View>
            : <Blank content="暂无礼包哦 快去购买吧～" />
          }
        </View>}
        {giftStatusTab == 1 && <View className="PageBackpackPropBox">
          {expiredData.length != 0 ?
            <View className="toolsBox">{this.getPurchasedBox(expiredData)}</View>
            : <Blank content="暂无礼包哦 快去购买吧～" />
          }
        </View>}
      </ScrollView>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
